<template>
  <div style="position: relative">
    <div style="position: absolute; left: 47.5%; top: 2%">
      <Decorator1>{{ deviceId }}</Decorator1>
    </div>
    <div class="deviceBorder">
      <img src="@/assets/img/pulping-machine-2d.png" />
      <el-progress
        :stroke-width="20"
        :percentage="50"
        duration="50"
        status="success"
        striped="true"
        striped-flow="true"
      >
        <span>搅拌</span>
      </el-progress>
      <el-progress
        style="margin-top: 4px"
        :stroke-width="20"
        :percentage="100"
        duration="50"
        status="exception"
        striped="true"
        striped-flow="true"
      >
        <span>制浆</span>
      </el-progress>
    </div>
  </div>
</template>

<script setup lang="ts">
import Decorator1 from '@/components/decorators/decorator1.vue'

let deviceId = 'MIXIX001'
let mycolor = 'red'
</script>

<style scoped>
.deviceBorder {
  border: solid;
  border-color: lightgreen;
  border-radius: 1em;
  overflow: hidden;
  padding: 4px;
}
</style>
